import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15

/**
 * 报警弹窗组件
 * 实时弹出报警信息
 */
Popup {
    id: root

    // 公开属性
    property var alarmEvent: null
    property bool autoClose: true
    property int autoCloseDelay: 5000  // 自动关闭延迟（毫秒）

    // 对话框属性
    modal: true
    closePolicy: Popup.CloseOnEscape
    width: 500
    height: 450
    x: (parent.width - width) / 2
    y: 100

    // 背景
    background: Rectangle {
        color: "white"
        radius: 8
        border.width: 2
        border.color: root.getAlarmColor()

        // 阴影效果
        layer.enabled: true
        layer.effect: DropShadow {
            horizontalOffset: 0
            verticalOffset: 4
            radius: 12
            samples: 24
            color: "#60000000"
        }
    }

    // 内容
    contentItem: ColumnLayout {
        spacing: 0

        // 标题栏
        Rectangle {
            Layout.fillWidth: true
            height: 60
            color: root.getAlarmColor()
            radius: 8

            // 只保留顶部圆角
            Rectangle {
                anchors.bottom: parent.bottom
                width: parent.width
                height: 4
                color: root.getAlarmColor()
            }

            RowLayout {
                anchors.fill: parent
                anchors.margins: 15
                spacing: 15

                // 报警图标
                Text {
                    text: root.getAlarmIcon()
                    font.pixelSize: 32
                    color: "white"

                    // 闪烁动画
                    SequentialAnimation on opacity {
                        running: true
                        loops: Animation.Infinite
                        NumberAnimation { to: 0.5; duration: 500 }
                        NumberAnimation { to: 1.0; duration: 500 }
                    }
                }

                // 报警标题
                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: 4

                    Text {
                        text: "⚠ 报警通知"
                        font.pixelSize: 18
                        font.bold: true
                        color: "white"
                    }

                    Text {
                        text: root.alarmEvent ? root.alarmEvent.typeName : ""
                        font.pixelSize: 13
                        color: "white"
                        opacity: 0.9
                    }
                }

                // 关闭按钮
                Button {
                    text: "×"
                    font.pixelSize: 24
                    font.bold: true
                    flat: true
                    
                    contentItem: Text {
                        text: parent.text
                        font: parent.font
                        color: "white"
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }

                    background: Rectangle {
                        color: parent.hovered ? "#40FFFFFF" : "transparent"
                        radius: 4
                    }

                    onClicked: {
                        root.close()
                    }
                }
            }
        }

        // 内容区域
        ColumnLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 20
            spacing: 15

            // 报警详情
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 140
                color: "#f8f9fa"
                radius: 4

                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: 15
                    spacing: 12

                    // 电表信息
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 10

                        Text {
                            text: "📊"
                            font.pixelSize: 16
                        }

                        ColumnLayout {
                            Layout.fillWidth: true
                            spacing: 4

                            Text {
                                text: "电表信息"
                                font.pixelSize: 11
                                color: "#7f8c8d"
                            }

                            Row {
                                spacing: 10

                                Text {
                                    text: root.alarmEvent ? root.alarmEvent.meterName : "未知电表"
                                    font.pixelSize: 14
                                    font.bold: true
                                    color: "#2c3e50"
                                }

                                Rectangle {
                                    width: 50
                                    height: 22
                                    radius: 4
                                    color: "#3498db"
                                    anchors.verticalCenter: parent.verticalCenter

                                    Text {
                                        anchors.centerIn: parent
                                        text: root.alarmEvent ? "#" + root.alarmEvent.meterId : "#0"
                                        font.pixelSize: 11
                                        font.bold: true
                                        color: "white"
                                    }
                                }
                            }
                        }
                    }

                    Rectangle {
                        Layout.fillWidth: true
                        height: 1
                        color: "#dfe6e9"
                    }

                    // 报警参数
                    GridLayout {
                        Layout.fillWidth: true
                        columns: 2
                        rowSpacing: 10
                        columnSpacing: 20

                        // 当前值
                        ColumnLayout {
                            spacing: 4

                            Text {
                                text: "当前值"
                                font.pixelSize: 11
                                color: "#7f8c8d"
                            }

                            Row {
                                spacing: 5

                                Text {
                                    text: root.alarmEvent ? root.alarmEvent.value.toFixed(2) : "0.00"
                                    font.pixelSize: 18
                                    font.bold: true
                                    color: root.getAlarmColor()
                                }

                                Text {
                                    text: root.getValueUnit()
                                    font.pixelSize: 12
                                    color: "#7f8c8d"
                                    anchors.verticalCenter: parent.verticalCenter
                                }
                            }
                        }

                        // 阈值
                        ColumnLayout {
                            spacing: 4

                            Text {
                                text: "阈值"
                                font.pixelSize: 11
                                color: "#7f8c8d"
                            }

                            Row {
                                spacing: 5

                                Text {
                                    text: root.alarmEvent ? root.alarmEvent.threshold.toFixed(2) : "0.00"
                                    font.pixelSize: 18
                                    font.bold: true
                                    color: "#2c3e50"
                                }

                                Text {
                                    text: root.getValueUnit()
                                    font.pixelSize: 12
                                    color: "#7f8c8d"
                                    anchors.verticalCenter: parent.verticalCenter
                                }
                            }
                        }

                        // 报警时间
                        ColumnLayout {
                            Layout.columnSpan: 2
                            spacing: 4

                            Text {
                                text: "报警时间"
                                font.pixelSize: 11
                                color: "#7f8c8d"
                            }

                            Text {
                                text: root.alarmEvent ? Qt.formatDateTime(root.alarmEvent.timestamp, "yyyy-MM-dd HH:mm:ss") : "--"
                                font.pixelSize: 14
                                color: "#2c3e50"
                            }
                        }
                    }
                }
            }

            // 报警描述
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 70
                color: "#fff3cd"
                radius: 4
                border.width: 1
                border.color: "#ffc107"

                RowLayout {
                    anchors.fill: parent
                    anchors.margins: 15
                    spacing: 12

                    Text {
                        text: "ℹ️"
                        font.pixelSize: 24
                    }

                    Text {
                        text: root.alarmEvent ? root.alarmEvent.description : "无报警信息"
                        font.pixelSize: 13
                        color: "#856404"
                        wrapMode: Text.WordWrap
                        Layout.fillWidth: true
                    }
                }
            }

            Item {
                Layout.fillHeight: true
            }
        }

        // 底部按钮
        Rectangle {
            Layout.fillWidth: true
            height: 60
            color: "#f8f9fa"
            radius: 8

            // 只保留底部圆角
            Rectangle {
                anchors.top: parent.top
                width: parent.width
                height: 4
                color: "#f8f9fa"
            }

            RowLayout {
                anchors.fill: parent
                anchors.margins: 15
                spacing: 10

                // 自动关闭倒计时
                Text {
                    text: root.autoClose ? ("自动关闭 (" + Math.ceil(autoCloseTimer.remaining / 1000) + "s)") : ""
                    font.pixelSize: 12
                    color: "#7f8c8d"
                    visible: root.autoClose
                }

                Item {
                    Layout.fillWidth: true
                }

                // 查看详情按钮
                Button {
                    text: "查看详情"
                    font.pixelSize: 13
                    Layout.preferredWidth: 100

                    onClicked: {
                        root.viewMeterDetail()
                        root.close()
                    }
                }

                // 确认按钮
                Button {
                    text: "我知道了"
                    font.pixelSize: 13
                    font.bold: true
                    highlighted: true
                    Layout.preferredWidth: 100

                    onClicked: {
                        root.acknowledgeAlarm()
                        root.close()
                    }
                }
            }
        }
    }

    // 自动关闭定时器
    Timer {
        id: autoCloseTimer
        interval: root.autoCloseDelay
        running: root.visible && root.autoClose
        
        property int remaining: interval

        onTriggered: {
            root.close()
        }

        onRunningChanged: {
            if (running) {
                remaining = interval
                countdownTimer.start()
            } else {
                countdownTimer.stop()
            }
        }
    }

    // 倒计时更新定时器
    Timer {
        id: countdownTimer
        interval: 100
        repeat: true
        
        onTriggered: {
            autoCloseTimer.remaining -= interval
            if (autoCloseTimer.remaining <= 0) {
                autoCloseTimer.remaining = 0
            }
        }
    }

    // 获取报警颜色
    function getAlarmColor() {
        if (!root.alarmEvent) return "#95a5a6"
        
        var typeName = root.alarmEvent.typeName
        if (typeName.indexOf("过流") >= 0) {
            return "#e74c3c"  // 红色：严重
        } else if (typeName.indexOf("跌落") >= 0 || typeName.indexOf("过压") >= 0) {
            return "#f39c12"  // 橙色：警告
        } else if (typeName.indexOf("欠压") >= 0) {
            return "#f39c12"  // 橙色：警告
        } else if (typeName.indexOf("离线") >= 0) {
            return "#95a5a6"  // 灰色：离线
        } else {
            return "#3498db"  // 蓝色：一般
        }
    }

    // 获取报警图标
    function getAlarmIcon() {
        if (!root.alarmEvent) return "⚠️"
        
        var typeName = root.alarmEvent.typeName
        if (typeName.indexOf("过流") >= 0) {
            return "🔥"
        } else if (typeName.indexOf("跌落") >= 0) {
            return "⬇️"
        } else if (typeName.indexOf("过压") >= 0) {
            return "⬆️"
        } else if (typeName.indexOf("欠压") >= 0) {
            return "⚡"
        } else if (typeName.indexOf("离线") >= 0) {
            return "📵"
        } else {
            return "⚠️"
        }
    }

    // 获取单位
    function getValueUnit() {
        if (!root.alarmEvent) return ""
        
        var typeName = root.alarmEvent.typeName
        if (typeName.indexOf("电压") >= 0) {
            return "V"
        } else if (typeName.indexOf("电流") >= 0) {
            return "A"
        } else {
            return ""
        }
    }

    // 确认报警
    function acknowledgeAlarm() {
        if (root.alarmEvent && root.alarmEvent.alarmId) {
            console.log("确认报警:", root.alarmEvent.alarmId)
            // TODO: 调用后端接口确认报警
        }
    }

    // 查看电表详情
    function viewMeterDetail() {
        if (root.alarmEvent && root.alarmEvent.meterId) {
            console.log("查看电表详情:", root.alarmEvent.meterId)
            // TODO: 切换到电表详情页
        }
    }

    // 显示报警
    function showAlarm(event) {
        root.alarmEvent = event
        root.open()
    }

    // 打开时的音效和动画
    onOpened: {
        // TODO: 播放报警音效
        console.log("报警弹窗打开:", root.alarmEvent)
    }

    onClosed: {
        // 清理
        autoCloseTimer.stop()
        countdownTimer.stop()
    }
}
